<template>
	<view class="container">
		<u-card :title="title" :padding="10" :title-size="24">
		  <view class="" slot="body">
		    <view class="u-body-item u-flex u-p-b-0">
		      <view class="u-body-item-title u-line-2">功能区目标：</view>
		    </view>
		    <view class="u-body-item u-flex u-p-b-0">
		      <view class="u-body-item-title u-line-2">水质类别：</view>
		    </view>
		    <view class="u-body-item u-flex u-p-b-0">
		      <view class="u-body-item-title u-line-2">水质情况：</view>
		    </view>
		  </view>
		</u-card>
    <u-card :title="title1" :padding="10" :title-size="24">
      <view class="" slot="body">
        <view class="u-body-item u-flex u-p-b-0">
          <view class="u-body-item-title u-line-2">河段河长：</view>
        </view>
        <view class="u-body-item u-flex u-p-b-0">
          <view class="u-body-item-title u-line-2">河长电话：</view>
        </view>
        <view class="u-body-item u-flex u-p-b-0">
          <view class="u-body-item-title u-line-2">消劣目标：</view>
          <view class="">不超过Ⅴ类</view>
        </view>
        <view class="u-body-item u-flex u-p-b-0">
          <view class="u-body-item-title u-line-2">设备编号：</view>
          <view class="">{{text}}</view>
        </view>
      </view>
    </u-card>
    <view class="monitoring">
      
    </view>
    <view class="minibox">
      <view class="box1">Ⅰ类</view>
      <view class="box2">Ⅱ类</view>
      <view class="box3">Ⅲ类</view>
      <view class="box4">Ⅳ类</view>
      <view class="box5">Ⅴ类</view>
      <view class="box6">劣Ⅴ</view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "台州试点-8江口街道山头泾二河与德俭路交界桥头",
        title1: "基本信息"
			};
		}
	}
</script>

<style lang="scss">
.monitoring {
  margin: 10px 20px;
  width: 680rpx;
  height: 300px;
  background-color: #49deab;
}

 .minibox {
    display: flex;
    margin-top: 10px;
    
    view {
      margin-left: 20px;
      margin-bottom: 10px;
    }
  }
  
  .box1 {
    width: 40px;
    height: 20px;
    background-color: #afd5ec;
  }
  
  .box2 {
    width: 40px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #a0ebe0;
  }
  
  .box3 {
    width: 40px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #49deab;
  }
  
  .box4 {
    width: 40px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #20a18a;
  }
  
  .box5 {
    width: 40px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #cac82c;
  }
  
  .box6 {
    width: 40px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #ed171a;
  }
</style>
